<template>
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view class="status_bar">

			</view>
			<!-- 导航栏 -->
			<view class="nav_bar flex align-center justify-between">
				<!-- @click="$tool.goBack()" -->
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n11.n018}}
				</view>
				<view @click="$tool.navTo('/pages/fwb/fwb?type=14')" class="f0 p-3">
					<image style="width: 30rpx;height: 30rpx;" :src="'/static/images/guize_'+model+'.png'" mode="">
					</image>
				</view>
			</view>
		</view>
		<view class="fixedIcon">
			<image style="width: 234rpx;height: 234rpx;" src="/static/images/option/o1.png" mode=""></image>
		</view>
		<!-- 交易信息 -->
		<view class="tradeInfo" :class="model=='light'?'tradeInfoLight':''">
			<view class="tradeInfoInnder px-3">
				<!-- 货币图标 -->
				<view class="f0 moneyIcon flex justify-center">
					<!-- btc -->
					<image style="width: 72rpx;height: 72rpx;border-radius: 50%;margin-right: -20rpx;z-index: 2;"
						:src="'/static/images/option/'+coinTypeTitle.replace('USDT','').replace('USD','')+'.png'"
						mode=""></image>
					<!-- usdt -->
					<image style="width: 72rpx;height: 72rpx;border-radius: 50%;z-index: 1;"
						src="/static/images/option/us.png" mode=""></image>
				</view>
				<!-- 货币种类、是否开市 -->
				<view class="selectCoinType flex align-center justify-between">
					<view @click="$refs.popup.open('bottom')" class="flex align-center">
						<view v-if="coinTypeTitle" class="text1 D-Bold">
							{{coinTypeTitle.replace('USDT','').replace('USD','')}}-USD
						</view>
						<view class="f0 ml-1">
							<image style="width: 22rpx;height: 12rpx;" :src="'/static/images/record/1_'+model+'.png'"
								mode=""></image>
						</view>
					</view>
					<view class="text2 A-Medium">
						{{isOpen?i18n11.n019:i18n11.n020}}
					</view>
				</view>
				<!-- 实时价 -->
				<view class="ssj text-alignC A-Medium">
					{{i18n11.n007}}
				</view>
				<!-- 价格 -->
				<view class="price D-Bold text-alignC" :class="isOpen?'':'xiutext'">
					${{optionPrice}}
				</view>
				<!-- 预估结果 -->
				<view v-if="isOpen" class="gessResult A-Medium text-alignC">
					{{i18n11.n021}}
					{{coinTypeTitle.replace('USDT','').replace('USD','')}}
					{{i18n11.n022}}
					{{fenzhong}}
					{{
						r==1||r==2?i18n11.n023:
						r==3||r==4?i18n11.n024:''
					}}
					<text class="ml-1" :class="'text'+r">
						{{
							r==1?i18n11.n025:
							r==2?i18n11.n026:
							r==3?i18n11.n027:
							r==4?i18n11.n028:''
						}}
					</text>
				</view>
				<view v-else class="xiuColor A-Medium text-alignC" :class="model=='light'?'xiuColorLight':''">
					— — — —
				</view>
				<!-- 选择 -->
				<view class="selectWrap A-Medium">
					<view class="" style="padding-top: 32rpx;">
						<view class="flex">
							<view @click="changeR(1)" class="f0" style="position: relative;">
								<image v-if="r!=1||!isOpen" style="width: 316rpx;height: 76rpx;"
									:src="'/static/images/option/left_'+model+'.png'" mode=""></image>
								<image v-else style="width: 316rpx;height: 76rpx;" src="/static/images/option/r1.png"
									mode=""></image>
								<view class="text1" style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;">
									{{i18n11.n029}} 1.{{profit1}}
								</view>
							</view>
							<view @click="changeR(2)" class="f0" style="position: relative;">
								<image v-if="r!=2||!isOpen" style="width: 316rpx;height: 76rpx;"
									:src="'/static/images/option/right_'+model+'.png'" mode=""></image>
								<image v-else style="width: 316rpx;height: 76rpx;" src="/static/images/option/r2.png"
									mode=""></image>
								<view class="text1" style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;">
									{{i18n11.n030}} 1.{{profit1}}
								</view>
							</view>
						</view>
						<view class="flex" style="margin-top: 12rpx;">
							<view class="flex-1 flex align-center justify-center">
								<view class="text2">
									<template v-if="isOpen">
										{{baifenbi.Bullish}}
									</template>
									<template v-else>
										-%
									</template>
									{{i18n11.n031}}
								</view>
								<view class="f0 ml-1">
									<image style="width: 32rpx;height: 32rpx;" src="/static/images/option/kanzhang.png"
										mode=""></image>
								</view>
							</view>
							<view class="flex-1 flex align-center justify-center">
								<view class="text2">
									<template v-if="isOpen">
										{{baifenbi.Bearish}}
									</template>
									<template v-else>
										-%
									</template>
									{{i18n11.n032}}
								</view>
								<view class="f0 ml-1">
									<image style="width: 32rpx;height: 32rpx;" src="/static/images/option/kandie.png"
										mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="" style="padding-top: 32rpx;">
						<view class="flex">
							<view @click="changeR(3)" class="f0" style="position: relative;">
								<image v-if="r!=3||!isOpen" style="width: 316rpx;height: 76rpx;"
									:src="'/static/images/option/left_'+model+'.png'" mode=""></image>
								<image v-else style="width: 316rpx;height: 76rpx;" src="/static/images/option/r3.png"
									mode=""></image>
								<view class="text1" style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;">
									{{i18n11.n033}} 1.{{profit3}}
								</view>
							</view>
							<view @click="changeR(4)" class="f0" style="position: relative;">
								<image v-if="r!=4||!isOpen" style="width: 316rpx;height: 76rpx;"
									:src="'/static/images/option/right_'+model+'.png'" mode=""></image>
								<image v-else style="width: 316rpx;height: 76rpx;" src="/static/images/option/r4.png"
									mode=""></image>
								<view class="text1" style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;">
									{{i18n11.n034}} 1.{{profit3}}
								</view>
							</view>
						</view>
						<view class="flex" style="margin-top: 12rpx;">
							<view class="flex-1 flex align-center justify-center">
								<view class="text2">
									<template v-if="isOpen">
										{{baifenbi.Single}}
									</template>
									<template v-else>
										-%
									</template>
									{{i18n11.n035}}
								</view>
								<view class="f0 ml-1">
									<image style="width: 32rpx;height: 32rpx;" src="/static/images/option/kandan.png"
										mode=""></image>
								</view>
							</view>
							<view class="flex-1 flex align-center justify-center">
								<view class="text2">
									<template v-if="isOpen">
										{{baifenbi.Plural}}
									</template>
									<template v-else>
										-%
									</template>
									{{i18n11.n036}}
								</view>
								<view class="f0 ml-1">
									<image style="width: 32rpx;height: 32rpx;" src="/static/images/option/kanshuang.png"
										mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 可用余额 -->
				<view class="useMoney flex align-center justify-between A-Medium">
					<view class="text1">
						{{i18n11.n037}}
					</view>
					<view class="flex align-center">
						<view class="text2">
							{{USDTMoney.a}}
						</view>
						<view class="text1 ml-1">
							USDT
						</view>
					</view>
				</view>
				<!-- 投入金额 -->
				<view class="inputMoney A-Medium">
					<view class="flex align-center justify-between">
						<view class="text1">
							{{i18n11.n038}}
						</view>
						<view class="flex align-center">
							<view class="text2">
								{{money}}
							</view>
							<view v-if="money!=0" @click="moneyNum=1" class="f0 ml-1">
								<image style="width: 28rpx;height: 28rpx;" src="/static/images/cha.png" mode=""></image>
							</view>
							<view class="text1 ml-1">
								USDT
							</view>
						</view>
					</view>
					<view class="bar">

					</view>
					<!-- 价格选项列表 -->
					<view class="flex align-center justify-between flex-wrap">
						<view @click="changeMoneyIndex(index)" v-for="(item,index) in moneyList"
							class="flex align-center justify-center"
							:class="moneyIndex==index?'priceItem2':'priceItem1'">
							${{item.title}}
						</view>
					</view>
				</view>
				<!-- 中奖描述 -->
				<view v-if="isOpen" class="desc A-Medium" style="margin-top: 32rpx;">
					<view class="">
						{{
							r==1?i18n11.n039+fenzhong+i18n11.n043+'1'+profit1+'%':
							r==2?i18n11.n040+fenzhong+i18n11.n044+'1'+profit1+'%':
							r==3?i18n11.n041+fenzhong+i18n11.n045+'1'+profit3+'%':
							r==4?i18n11.n042+fenzhong+i18n11.n046+'1'+profit3+'%':''
						}}
					</view>
					<view class="" style="margin-top: 8rpx;">
						{{
							r==1?i18n11.n039+fenzhong+i18n11.n047+profit2+'%':
							r==2?i18n11.n040+fenzhong+i18n11.n048+profit2+'%':
							r==3?i18n11.n041+fenzhong+i18n11.n049+profit4+'%':
							r==4?i18n11.n042+fenzhong+i18n11.n050+profit4+'%':''
						}}
					</view>
				</view>
				<view @click="createdOrder" :style="isOpen?'':'opacity: .4;'"
					class="btn A-Medium flex align-center justify-center">
					{{i18n11.n051}}
				</view>
			</view>
		</view>
		<!-- 订单状态 -->
		<view class="orderStauts A-Medium flex align-center justify-between"
			:class="model=='light'?'orderStautsLight':''">
			<view class="flex align-center">
				<view @click="changeOrderStauts(1)" :class="orderStauts==1?'text1':'text2'">
					{{i18n11.n052}}
				</view>
				<view @click="changeOrderStauts(2)" :class="orderStauts==2?'text1':'text2'">
					{{i18n11.n053}}
				</view>
			</view>
			<view class="f0">
				<image @click="$tool.navTo('/pages/option/qqjl')" style="width: 56rpx;height: 56rpx;"
					:src="'/static/images/syjl_'+model+'.png'" mode=""></image>
			</view>
		</view>
		<!-- 订单列表 -->
		<!-- v-if="optionPrice" -->
		<template v-if="optionPrice" v-for="(item,index) in orderList">
			<qqjlList :djs="item.djs" :item="item"></qqjlList>
		</template>
		<view v-if="orderList.length==0" class="A-Medium text-alignC"
			style="font-size: 24rpx;color: #7F838D;padding-bottom: 48rpx;">
			{{i18n10.n144}}
		</view>
		<!-- 确认弹窗 -->
		<modelP :type="3" ref="modelP" @confirm="confrim"></modelP>
		<!-- 币种 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popupWrap pt-1 pb-2 A-Medium" :class="model=='light'?'popupWrapLight':''">
				<view class="titleWrap mx-4 flex align-center justify-between">
					<view class="f0 opacity0">
						<image src="@/static/images/cha.png" mode=""></image>
					</view>
					<view class="">

					</view>
					<view @click="closePopup" class="f0">
						<image src="@/static/images/cha.png" mode=""></image>
					</view>
				</view>
				<view @click="confirmCoinType(item)" v-for="(item,index) in coinTypeList"
					:style="index==2?'border:none;':''" class="list py-3 flex align-center justify-center"
					:class="model=='light'?'listLight':''">
					<view class="f0 mr-2">
						<image style="width: 72rpx;height: 72rpx;border-radius: 50%;margin-right: -20rpx;z-index: 2;"
							:src="'/static/images/option/'+item.title.replace('USDT','').replace('USD','')+'.png'"
							mode=""></image>
						<!-- usdt -->
						<image style="width: 72rpx;height: 72rpx;border-radius: 50%;z-index: 1;"
							src="/static/images/option/us.png" mode=""></image>
					</view>
					<view class="">
						{{item.title.replace('USDT','').replace('USD','')}}-USD
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		optionsAdd,
		optionsList,
		// optionsOrderStatus,
		newOptionsCoinType,
		newOptionsBuyAmount,
		stakeProportion,
		newOptionsSettlement,
		newOptionsMinute
	} from '@/core/api/index.js';
	import qqjlList from '@/components/qqjlList.vue';
	import modelP from '@/components/modelP.vue';
	export default {
		components: {
			qqjlList,
			modelP,
		},
		data() {
			return {
				r: 1, //1看涨 2看跌 3单 4双
				moneyList: [
					// {
					// 	value: 5,
					// 	title: 5
					// },
					// {
					// 	value: 10,
					// 	title: 10
					// },
					// {
					// 	value: 50,
					// 	title: 50
					// },
					// {
					// 	value: 100,
					// 	title: 100
					// },
					// {
					// 	value: 500,
					// 	title: 500
					// }
				],
				moneyIndex: -1,
				moneyNum: 1,
				orderStauts: 1, //1进行中 2已完成
				pageNo: 1,
				pageSize: 10,
				orderList: [],
				coinType: '', //币种
				coinTypeTitle: '',
				coinTypeList: [],
				timer: null,
				isCangetList: false,
				isOpen: false,
				timer2: null,
				baifenbi: '',
				fenzhong: '',
				earlyCloseMinutes: 0, //提前闭市时间分钟
			}
		},
		computed: {
			i18n() {
				return this.$t('option2');
			},
			i18n4() {
				return this.$t('last3');
			},
			i18n10() {
				return this.$t('newObj');
			},
			i18n11() {
				return this.$t('newObj2');
			},
			model() {
				return this.$store.state.config.model;
				// return 'dark';
			},
			money() {
				if (this.moneyIndex == -1) {
					return 0
				}
				return this.moneyList[this.moneyIndex].title * this.moneyNum
			},
			optionPrice() {
				return this.$store.state.config.optionPrice;
			},
			USDTMoney() {
				return this.$store.state.config.USDTMoney;
			},
			profit1() {
				return this.$store.state.config.profit1;
			},
			profit2() {
				return this.$store.state.config.profit2;
			},
			profit3() {
				return this.$store.state.config.profit3;
			},
			profit4() {
				return this.$store.state.config.profit4;
			},
			openMarketTime() {
				return this.$store.state.config.openMarketTime;
			},
		},
		onLoad() {
			newOptionsMinute().then(res => {
				this.earlyCloseMinutes = Number(res.result);
			})
			newOptionsBuyAmount().then(res => {
				this.moneyList = res.result;
			})
			this.getList()
			newOptionsCoinType().then(res => {
				this.coinTypeList = res.result;
				this.confirmCoinType(this.coinTypeList[0]);

			})
			this.timer2 = setInterval(e => {
				if (this.coinTypeTitle.replace('USDT', '').replace('USD', '') == "BTC" || this.coinTypeTitle
					.replace('USDT', '').replace('USD', '') == "ETH") {
					this.getIsopen();
				} else if (this.coinTypeTitle.replace('USDT', '').replace('USD', '') == "GOLD") {
					this.getIsopen1();
				} else if (this.coinTypeTitle.replace('USDT', '').replace('USD', '') == "UKOIL") {
					this.getIsopen2();
				} else if (this.coinTypeTitle.replace('USDT', '').replace('USD', '') == "EUR") {
					this.getIsopen3();
				} else if (this.coinTypeTitle.replace('USDT', '').replace('USD', '') == "GBP") {
					this.getIsopen4();
				}
			}, 1000)
		},
		onReachBottom() {
			// this.pageNo++;
			// this.getList();
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onTabItemTap(e){
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			stakeProportion().then(res => {
				this.baifenbi = res.result;
			})
			newOptionsSettlement().then(res => {
				this.fenzhong = res.result;
			})
		},
		methods: {
			getIsopen() {
				let s = this.openMarketTime.split('-')[0];
				let e = this.openMarketTime.split('-')[1];
				const now = new Date();
				const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate(), s.split(':')[0], s.split(
					':')[1], 0, 0);
				const todayEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), e.split(':')[0], e.split(':')[
					1], 0, 0);
				if (now >= todayStart && now <= todayEnd) {
					this.isOpen = true;
				} else {
					this.moneyIndex == -1;
					// this.r=-1;
					this.isOpen = false;
				}
			},
			getIsopen1() {
				// 设置冬令时和非冬令时的规则
				let winterRules = [{
						s: '23:00:00',
						e: '23:59:59'
					},
					{
						s: '00:00:00',
						e: `21:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `21:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `21:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `21:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `21:${59-this.earlyCloseMinutes}:59`
					},
					{

					},
				];
				let winterRules2 = [{
						s: '23:00:00',
						e: '23:59:59'
					},
					{
						s: '23:00:00',
						e: '23:59:59'
					},
					{
						s: '23:00:00',
						e: '23:59:59'
					},
					{
						s: '23:00:00',
						e: '23:59:59'
					},
					{
						s: '23:00:00',
						e: '23:59:59'
					},
					{
						s: '00:00:00',
						e: `21:${59-this.earlyCloseMinutes}:59`
					},
					{

					},
				];
				let nonWinterRules = [{
						s: '22:00:00',
						e: '23:59:59'
					},
					{
						s: '00:00:00',
						e: `20:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `20:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `20:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `20:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `20:${59-this.earlyCloseMinutes}:59`
					},
					{

					},
				];
				let nonWinterRules2 = [{
						s: '22:00:00',
						e: '23:59:59'
					},
					{
						s: '22:00:00',
						e: '23:59:59'
					},
					{
						s: '22:00:00',
						e: '23:59:59'
					},
					{
						s: '22:00:00',
						e: '23:59:59'
					},
					{
						s: '22:00:00',
						e: '23:59:59'
					},
					{
						s: '00:00:00',
						e: `20:${59-this.earlyCloseMinutes}:59`
					},
					{

					},
				];
				// 获取当前时间（GMT0时区）
				let now = new Date().toLocaleString('en-US', {
					timeZone: 'Etc/UTC'
				});
				// 将当前时间转换为 Date 对象
				let currentTime = new Date(now);
				// 设置提前休息的时间（例如提前10分钟）
				let rules = this.isInWinterTime(currentTime) ? winterRules : nonWinterRules;
				if (this.isInWinterTime(currentTime)) {
					this.isOpen = this.isBusinessHours(rules, currentTime) || this.isBusinessHours(winterRules2, currentTime);
				} else {
					this.isOpen = this.isBusinessHours(rules, currentTime) || this.isBusinessHours(nonWinterRules2, currentTime);
				}

			},
			getIsopen2() {
				// 设置冬令时和非冬令时的规则
				let winterRules = [{

					},
					{
						s: '01:00:00',
						e: `21:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '01:00:00',
						e: `21:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '01:00:00',
						e: `21:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '01:00:00',
						e: `21:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '01:00:00',
						e: `21:${59-this.earlyCloseMinutes}:59`
					},
					{

					},
				];
				let nonWinterRules = [{

					},
					{
						s: '01:00:00',
						e: `20:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '01:00:00',
						e: `20:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '01:00:00',
						e: `20:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '01:00:00',
						e: `20:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '01:00:00',
						e: `20:${59-this.earlyCloseMinutes}:59`
					},
					{

					},
				];
				// 获取当前时间（GMT0时区）
				let now = new Date().toLocaleString('en-US', {
					timeZone: 'Etc/UTC'
				});
				// 将当前时间转换为 Date 对象
				let currentTime = new Date(now);
				// 设置提前休息的时间（例如提前10分钟）
				let rules = this.isInWinterTime(currentTime) ? winterRules : nonWinterRules;
				this.isOpen = this.isBusinessHours(rules, currentTime);
			},
			getIsopen3() {
				// 设置冬令时和非冬令时的规则
				let winterRules = [{
						s: '22:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `21:${59-this.earlyCloseMinutes}:59`
					},
					{

					},
				];
				let nonWinterRules = [{
						s: '21:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `20:${59-this.earlyCloseMinutes}:59`
					},
					{

					},
				];
				// 获取当前时间（GMT0时区）
				let now = new Date().toLocaleString('en-US', {
					timeZone: 'Etc/UTC'
				});
				// 将当前时间转换为 Date 对象
				let currentTime = new Date(now);
				// 判断当前时间是否在营业时间内
				let rules = this.isInWinterTime(currentTime) ? winterRules : nonWinterRules;
				this.isOpen = this.isBusinessHours(rules, currentTime);
			},
			getIsopen4() {
				// 设置冬令时和非冬令时的规则
				let winterRules = [{
						s: '22:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `21:${59-this.earlyCloseMinutes}:59`
					},
					{

					},
				];
				let nonWinterRules = [{
						s: '21:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `23:${59-this.earlyCloseMinutes}:59`
					},
					{
						s: '00:00:00',
						e: `20:${59-this.earlyCloseMinutes}:59`
					},
					{

					},
				];
				// 获取当前时间（GMT0时区）
				let now = new Date().toLocaleString('en-US', {
					timeZone: 'Etc/UTC'
				});
				// 将当前时间转换为 Date 对象
				let currentTime = new Date(now);
				// 判断当前时间是否在营业时间内
				let rules = this.isInWinterTime(currentTime) ? winterRules : nonWinterRules;
				this.isOpen = this.isBusinessHours(rules, currentTime);
			},
			// 判断是否处于冬令时
			isInWinterTime(date) {
				const month = date.getMonth();
				return month >= 11 || month <= 2; // 冬令时一般为11月到次年2月
			},
			isBusinessHours(rules, now) {
				let timeIndex = now.getDay();
				let timeRange = rules[timeIndex];
				if (JSON.stringify(timeRange) == '{}') {
					return false;
				}
				let s = this.setTime(now, timeRange.s.split(':'));
				let e = this.setTime(now, timeRange.e.split(':'));
				return now >= s && now <= e;
			},
			setTime(now, arr) {
				const today = new Date(now);
				today.setHours(arr[0], arr[1], arr[2], 0); // 设置时间为 22:00:00
				return today;
			},
			changeR(e) {
				if (!this.isOpen) {
					return;
				}
				if (this.r == e) {
					return;
				}
				this.r = e;
			},
			changeMoneyIndex(e) {
				if (!this.isOpen) {
					return;
				}
				if (this.moneyIndex == e) {
					this.moneyNum++;
					return;
				}
				this.moneyIndex = e;
				this.moneyNum = 1;
			},
			changeOrderStauts(e) {
				if (this.orderStauts == e) {
					return;
				}
				this.orderStauts = e;
				this.pageNo = 1;
				this.getList();
			},
			createdOrder() {
				if (!this.isOpen) {
					return;
				}
				if (!this.optionPrice) {
					return;
				}
				if (this.money == 0) {
					this.$tool.showToast(this.i18n11.n054 + '0');
					return;
				}
				this.$refs.modelP.open();
			},
			confrim() {
				optionsAdd({
					mobileUserId: uni.getStorageSync('mobileUserId'), //用户id
					coinType: this.coinTypeTitle, //币种
					buyPrice: this.optionPrice, //买入价
					buyAmount: this.money, //买入金额
					bullishBearish: this.r == 1 ? 'Bullish' : this.r == 2 ? 'Bearish' : this.r == 3 ? 'Single' :
						this.r == 4 ?
						'Plural' : '',
				}).then(res => {
					// 用户余额
					this.$store.dispatch('config/getAassetList');
					// that.$tool.showToast(that.i18n.o018);
					// this.pageNo=1;
					this.orderStauts = 1;
					this.getList();
				})
			},
			getList() {
				optionsList({
					// pageNo: this.pageNo,
					mobileUserId: uni.getStorageSync('mobileUserId'), //客户id
					// pageSize: this.pageSize,
					coinType: '', //币种
					optionsOrderStatus: this.orderStauts - 1, //状态
					bullishBearish: '', //看涨 看跌 看单 看双
				}).then(res => {
					console.log(res, 'cs');
					let list = res.result;
					// if (this.pageNo == 1) {
					// 	this.orderList = list;
					// } else {
					// 	if (list.length == 0) {
					// 		this.pageNo--;
					// 	} else {
					// 		this.orderList.push(list);
					// 	}
					// }
					this.orderList = list;
					this.isCangetList = true;
					this.changeOrderInfo();
				})
			},
			changeOrderInfo() {
				for (let i = 0; i < this.orderList.length; i++) {
					if (this.orderList[i].optionsOrderStatus == 0) {
						this.orderList[i].djs = this.getFinishTime(this.orderList[i].settlementTimeEnd);
					}
				}
				clearInterval(this.timer);
				this.timer = null;
				this.timer = setInterval(e => {
					for (let i = 0; i < this.orderList.length; i++) {
						if (this.orderList[i].optionsOrderStatus == 0) {
							this.orderList[i].djs = this.getFinishTime(this.orderList[i].settlementTimeEnd);
						}
					}
					this.$forceUpdate();
				}, 1000)
			},
			getFinishTime(e) {
				const orderCreationTime = new Date(e);
				const now = new Date();
				const diffMilliseconds = orderCreationTime - now;
				if (diffMilliseconds <= 0) {
					if (this.isCangetList) {
						// this.pageNo=1;
						this.getList();
					}
					this.isCangetList = false;
					return '00:00:00';
				}
				const hours = Math.floor(diffMilliseconds / (1000 * 60 * 60));
				const minutes = Math.floor((diffMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
				const seconds = Math.floor((diffMilliseconds % (1000 * 60)) / 1000);
				console.log(String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0') + ':' + String(seconds)
					.padStart(2, '0'));
				return String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0') + ':' + String(seconds)
					.padStart(2, '0');
				// console.log(`剩余可取消订单时间: ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`);
			},
			confirmCoinType(item) {
				if (this.coinType == item.value) {
					this.closePopup();
					return;
				}
				this.coinType = item.value;
				this.coinTypeTitle = item.title;
				this.optionPrice = '';
				this.$store.commit("config/set_optionCoinType", this.coinType);
				this.closePopup();
			},
			closePopup() {
				this.$refs.popup.close()
			}
		}
	}
</script>
<style scoped lang="scss">
	.xiuColor {
		font-size: 32rpx;
		color: #7F838D;
	}

	.xiuColorLight {
		font-size: 32rpx;
		color: #AAACB8;
	}

	.xiutext {
		color: #7F838D !important;
	}

	.fixedIcon {
		padding-top: 88rpx;
		position: fixed;
		right: 0;
		top: var(--status-bar-height);
		// background: #fff;
		z-index: 0;
	}

	.orderStauts {
		margin: 28rpx;

		.text1 {
			font-size: 24rpx;
			color: #FFFFFF;
			margin-right: 30rpx;
		}

		.text2 {
			font-size: 24rpx;
			color: #7F838D;
			margin-right: 30rpx;
		}
	}

	.orderStautsLight {
		margin: 28rpx;

		.text1 {
			font-size: 24rpx;
			color: #47474A;
			margin-right: 30rpx;
		}

		.text2 {
			font-size: 24rpx;
			color: #7F838D;
			margin-right: 30rpx;
		}
	}

	.tradeInfo {
		position: relative;
		z-index: 1;
		margin-left: 28rpx;
		margin-right: 28rpx;
		margin-top: 70rpx;
		background: #16181C;
		border-radius: 30rpx;

		.tradeInfoInnder {
			border-radius: 30rpx;
			border: 2rpx solid #1F2128;
			background: url(/static/images/option/o4_dark.png);
			background-repeat: no-repeat;
			background-size: 230rpx 123rpx;
			background-position: 412rpx 0;

			.moneyIcon {
				margin-top: -44rpx;
				margin-bottom: 38rpx;
			}

			.selectCoinType {
				.text1 {
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;

				}

				.text2 {
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}

			.ssj {
				margin-top: 34rpx;
				margin-bottom: 24rpx;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.price {
				font-weight: bold;
				font-size: 64rpx;
				color: #FFFFFF;
			}

			.gessResult {
				font-size: 32rpx;
				color: #FFFFFF;

				.text1 {
					color: #D22540;
				}

				.text2 {
					color: #53D290;
				}

				.text3 {
					color: #74C145;
				}

				.text4 {
					color: #F3BA2F;
				}
			}

			.selectWrap {
				.text1 {
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 76rpx;
					text-align: center;
				}

				.text2 {
					font-size: 24rpx;
					color: #AAACB8;
				}
			}

			.useMoney {
				padding: 24rpx 28rpx;
				background: #292C36;
				border-radius: 30rpx;
				font-size: 24rpx;
				margin: 32rpx 0;

				.text1 {
					color: #AAACB8;
				}

				.text2 {
					color: #FFFFFF;
				}
			}

			.inputMoney {
				padding: 24rpx 28rpx;
				background: #292C36;
				border-radius: 30rpx;
				font-size: 24rpx;

				.bar {
					height: 2rpx;
					background: #fff;
					opacity: 0.1;
					margin-top: 10rpx;
				}

				.text1 {
					color: #AAACB8;
				}

				.text2 {
					color: #FFFFFF;
				}

				.priceItem1 {
					width: 100rpx;
					height: 60rpx;
					background: #16181C;
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #7F838D;
					margin-top: 32rpx;
					flex-shrink: 0;
				}

				.priceItem2 {
					width: 100rpx;
					height: 60rpx;
					background: #5951BA;
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					margin-top: 32rpx;
					flex-shrink: 0;
				}

			}

			.desc {
				font-size: 28rpx;
				color: #AAACB8;
			}

			.btn {
				width: 634rpx;
				height: 80rpx;
				background: #5951BA;
				border-radius: 74rpx;
				font-size: 28rpx;
				color: #F7F7F7;
				margin-top: 32rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.tradeInfoLight {
		background: #fff;

		// padding-top: 30rpx;
		.tradeInfoInnder {
			border: 1rpx solid #fff;
			background: url(/static/images/option/o4_light.png);
			background-repeat: no-repeat;
			background-size: 230rpx 123rpx;
			background-position: 412rpx 0;

			.selectCoinType {
				.text1 {
					color: #0E0F11;

				}

				.text2 {
					color: #0E0F11;
				}
			}

			.ssj {
				color: #0E0F11;
			}

			.price {
				color: #0E0F11;
			}

			.gessResult {
				color: #0E0F11;
			}

			.selectWrap {
				.text2 {
					color: #47474A;
				}
			}

			.useMoney {
				padding: 24rpx 28rpx;
				background: #F4F4F4;
				border-radius: 30rpx;
				font-size: 24rpx;
				margin: 32rpx 0;

				.text1 {
					color: #47474A;
				}

				.text2 {
					color: #7F838D;
				}
			}

			.inputMoney {
				padding: 24rpx 28rpx;
				background: #F4F4F4;
				border-radius: 30rpx;
				font-size: 24rpx;

				.bar {
					height: 2rpx;
					background: #fff;
					opacity: 0;
					margin-top: 10rpx;
				}

				.text1 {
					color: #47474A;
				}

				.text2 {
					color: #7F838D;
				}

				.priceItem1 {
					background: #E6E8EF;
					color: #47474A;
				}

			}

			.desc {
				color: #47474A;
			}

			.btn {
				width: 634rpx;
				height: 80rpx;
				background: #5951BA;
				border-radius: 74rpx;
				font-size: 28rpx;
				color: #F7F7F7;
				margin-top: 32rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	// 弹窗---开始
	.popupWrap {
		background: #0E0F11;
		font-size: 32rpx;
		color: #F7F7F7;

		.titleWrap {
			margin-bottom: 6rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.list {
			text-align: center;
			border-bottom: 2rpx solid #1F2128;
		}

		.listLight {
			border-bottom: 2rpx solid #F4F4F4;
		}
	}

	.popupWrapLight {
		background: #ffffff;
		color: #0E0F11;
	}

	// 弹窗---结束
</style>